/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getChannel, setActiveId } from '../store/actions/channel'
export default function Channel () {
  // 拿频道数据 (state.channel.channels)
  const channels = useSelector((state) => state.channel.channels)
  const activeId = useSelector((state) => state.channel.activeId)
  const dispatch = useDispatch()
  useEffect(() => {
    // 发送ajax的步骤 写在../store/actions/channel 里面
    dispatch(getChannel())
  }, [])
  return (
    <ul className="catagtory">
      {channels.map((it) => (
        <li
          onClick={() => {
            dispatch(setActiveId(it.id))
          }}
          className={activeId === it.id ? 'select' : ''}
          key={it.id}>
          {it.name}
        </li>
      ))}
      {/* <li className="select">开发者资讯</li>
      <li>ios</li> */}
    </ul>
  )
}
